
<!DOCTYPE html>

<html lang="en">
<head>
    <script type="text/ecmascript" src="../js/datajson.js"></script> 

    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type="text/ecmascript" src="../Guriddo_jqGrid_JS_demo/js/jquery.min.js"></script> 
    <script type="text/ecmascript" src="../Guriddo_jqGrid_JS_demo/js/jquery-ui.min.js"></script>

    <!-- This is the Javascript file of jqGrid -->   
    <script type="text/ecmascript" src="../Guriddo_jqGrid_JS_demo/js/trirand/jquery.jqGrid.min.js"></script>
    <!-- This is the localization file of the grid controlling messages, labels, etc.-->
    <!-- We support more than 40 localizations -->
    <script type="text/ecmascript" src="../Guriddo_jqGrid_JS_demo/js/trirand/i18n/grid.locale-cn.js"></script>

    <!-- 导出excel需要用，无导出功能可以不引入 -->
    <script type="text/javascript" language="javascript" src="../Guriddo_jqGrid_JS_demo/js/jszip.min.js"></script>

    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
    <link rel="stylesheet" type="text/css" media="screen" href="../Guriddo_jqGrid_JS_demo/css/jquery-ui.css" />
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="../Guriddo_jqGrid_JS_demo/css/trirand/ui.jqgrid.css" />

    <meta charset="utf-8" />
    <title>jqGrid Loading Data - Toolbar Searching with Search Options</title>
</head>
<body>

    <style type="text/css">

        /* set the size of the datepicker search control for Order Date*/
        #ui-datepicker-div { font-size:11px; }
        
        /* set the size of the autocomplete search control*/
        .ui-menu-item {
            font-size: 11px;
        }

         .ui-autocomplete {
            font-size: 11px;
        }       

        /* 设置行高 */
        /* .jqgrow {
            height: 100px;
        } */

    </style>

    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>
    <button id="export">导出Excel</button>
    <script type="text/javascript"> 
    
        $(document).ready(function () {
            $("#jqGrid").jqGrid({
                url: 'data.json',
                mtype: "GET",
                datatype: "json",
                page: 1,
                colModel: [
                {   label : "股票代码",
						sorttype: 'integer',
						name: 'stock_id', 
						key: true, 
						width: 60,
                        align : "center",
                        frozen: true,
                        // colmenu : true, coloptions : {sorting:true, columns: true, filtering: true, seraching:true, grouping:false, freeze : true},
						searchoptions: {
                            // show search options
                            sopt: ['cn','eq','ne','le','lt','gt','ge','bw','bn','nc','ew','en'] // ge = greater or equal to, le = less or equal to, eq = equal to
						}
					},
                    {   label : "正股名称",
						sorttype: 'integer',
						name: 'stock_nm', 
						key: true, 
						width: 60,
                        align : "center",
						searchoptions: {
                            // show search options
                            sopt: ['cn','eq','ne','le','lt','gt','ge','bw','bn','nc','ew','en'] // ge = greater or equal to, le = less or equal to, eq = equal to
						}
					},
                    {   label : "进展公告日",
						sorttype: 'integer',
						name: 'progress_dt', 
						key: true, 
						width: 100,
                        align : "center",
						searchoptions: {
                            // show search options
                            sopt: ['cn','eq','ne','le','lt','gt','ge','bw','bn','nc','ew','en'] // ge = greater or equal to, le = less or equal to, eq = equal to
						}
					},
                    {   label : "方案进展",
						sorttype: 'integer',
						name: 'progress_nm', 
						// key: true, 
						width: 100,
                        // search : false,
                        align : "center",
                        stype : "select",
						searchoptions: {
                            // show search options
                            sopt: ['eq','ne','le','lt','gt','ge','bw','bn','cn','nc','ew','en'] // ge = greater or equal to, le = less or equal to, eq = equal to
						}
					},
                    {   label : "规模",
						sorttype: 'float',
						name: 'amount', 
						key: true, 
						width: 75,
                        align : "center",
						searchoptions: {
                            // show search options
                            sopt: ['le','eq','ne','lt','gt','ge','bw','bn','cn','nc','ew','en'] // ge = greater or equal to, le = less or equal to, eq = equal to
						}
					},
                    {   label : "上市流通规模",
						sorttype: 'float',
						name: '上市流通规模', 
						key: true, 
						width: 75,
                        align : "center",
						searchoptions: {
                            // show search options
                            sopt: ['le','eq','ne','lt','gt','ge','bw','bn','cn','nc','ew','en'] // ge = greater or equal to, le = less or equal to, eq = equal to
						}
					},
                    {   label : "当前股价",
						sorttype: 'float',
						name: 'price', 
						key: true, 
						width: 75,
                        align : "center",
						searchoptions: {
                            // show search options
                            sopt: ['le','eq','ne','lt','gt','ge','bw','bn','cn','nc','ew','en'] // ge = greater or equal to, le = less or equal to, eq = equal to
						}
					},
                    {   label : "百元含权",
						sorttype: 'float',
						name: 'cb_amount', 
						key: true, 
						width: 75,
                        align : "center",
						searchoptions: {
                            // show search options
                            sopt: ['ge','gt','eq','ne','le','lt','bw','bn','cn','nc','ew','en'] // ge = greater or equal to, le = less or equal to, eq = equal to
						}
					},
                    {   label : "配一手债股数",
						sorttype: 'float',
						name: '配一手债股数', 
						key: true, 
						width: 75,
                        align : "center",
						searchoptions: {
                            // show search options
                            sopt: ['eq','ne','le','lt','gt','ge','bw','bn','cn','nc','ew','en'] // ge = greater or equal to, le = less or equal to, eq = equal to
						}
					},
                    {   label : "获配金额",
						sorttype: 'float',
						name: '获配金额', 
						key: true, 
						width: 75,
                        align : "center",
						searchoptions: {
                            // show search options
                            sopt: ['le','eq','ne','lt','gt','ge','bw','bn','cn','nc','ew','en'] // ge = greater or equal to, le = less or equal to, eq = equal to
						}
					},
                    {   label : "获配张数",
						sorttype: 'float',
						name: '获配张数', 
						key: true, 
						width: 75,
                        align : "center",
						searchoptions: {
                            // show search options
                            sopt: ['ge','eq','ne','le','lt','gt','bw','bn','cn','nc','ew','en'] // ge = greater or equal to, le = less or equal to, eq = equal to
						}
					},
                    {   label : "股票市值",
						sorttype: 'float',
						name: '市值', 
						key: true, 
						width: 75,
                        align : "center",
						searchoptions: {
                            // show search options
                            sopt: ['le','eq','ne','lt','gt','ge','bw','bn','cn','nc','ew','en'] // ge = greater or equal to, le = less or equal to, eq = equal to
						}
					},
                    {   label : "预估收益",
						sorttype: 'float',
						name: '债预期收益', 
						key: true, 
						width: 75,
                        align : "center",
						searchoptions: {
                            // show search options
                            sopt: ['ge','eq','ne','le','lt','gt','bw','bn','cn','nc','ew','en'] // ge = greater or equal to, le = less or equal to, eq = equal to
						}
					},
                    {   label : "预估安全垫",
						sorttype: 'float',
						name: '安全垫', 
						key: true, 
						width: 75,
                        align : "center",
						searchoptions: {
                            // show search options
                            sopt: ['ge','eq','ne','le','lt','gt','bw','bn','cn','nc','ew','en'] // ge = greater or equal to, le = less or equal to, eq = equal to
						}
					},
                    {   label : "所属行业",
						// sorttype: 'integer',
						name: '所属行业', 
						key: true, 
						width: 75,
                        align : "center",
						searchoptions: {
                            // show search options
                            sopt: ['cn','eq','ne','le','lt','gt','ge','bw','bn','nc','ew','en'] // ge = greater or equal to, le = less or equal to, eq = equal to
						}
					},
                    {   label : "概念",
						// sorttype: 'integer',
						name: '概念', 
						key: true, 
						width: 75,
                        align : "center",
						searchoptions: {
                            // show search options
                            sopt: ['cn','eq','ne','le','lt','gt','ge','bw','bn','nc','ew','en'] // ge = greater or equal to, le = less or equal to, eq = equal to
						}
					},
                    // {
					// 	label: "Customer ID",
                    //     name: 'CustomerID',
                    //     width: 150, 
					// 	stype : "select"
                    // },
                    // { 
					// 	label: "Order Date",
                    //     name: 'OrderDate',
                    //     width: 150,
					// 	sorttype:'date',
                    //     searchoptions: {
                    //         // dataInit is the client-side event that fires upon initializing the toolbar search field for a column
                    //         // use it to place a third party control to customize the toolbar
                    //         dataInit: function (element) {
                    //             $(element).datepicker({
                    //                 id: 'orderDate_datePicker',
                    //                 dateFormat: 'yy-mm-dd',
                    //                 //minDate: new Date(2010, 0, 1),
                    //                 maxDate: new Date(2020, 0, 1),
                    //                 showOn: 'focus'
                    //             });
                    //         },
                    //         // show search options
                    //         sopt: ["ge","le","eq"] // ge = greater or equal to, le = less or equal to, eq = equal to							
                    //     }
                    // },                    
                    // {
					// 	label : "Ship Name",
                    //     name: 'ShipName',
                    //     width: 150,
                    //     searchoptions: {
                    //         // dataInit is the client-side event that fires upon initializing the toolbar search field for a column
                    //         // use it to place a third party control to customize the toolbar
                    //         dataInit: function (element) {
                    //             $(element).autocomplete({
                    //                 id: 'AutoComplete',
                    //                 source: function(request, response){
					// 					this.xhr = $.ajax({
					// 						url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/autocompletep.php?callback=?&acelem=ShipName',
					// 						data: request,
					// 						dataType: "jsonp",
					// 						success: function( data ) {
					// 							response( data );
					// 						},
					// 						error: function(model, response, options) {
					// 							response([]);
					// 						}
					// 					});
					// 				},
                    //                 autoFocus: true
                    //             });
                    //         }
					// 	}
                    // },
                    // {
					// 	label: "Freight",
					// 	sorttype: 'number',
					// 	name: 'Freight', width: 150,
					// 	//searchrules : {number:true},
					// 	searchoptions : {
                    //         // show search options
                    //         sopt: ["ge","le","eq"] // ge = greater or equal to, le = less or equal to, eq = equal to  							
					// 	}
					// }
                ],
				loadonce: true,
				// viewrecords: true,
                width:"100%",
                autowidth:true,
                height:"100%",
                rowNum: 1000,
                multiSort: true, // 允许多列排序
				sortable: true,// 列拖动排序
				viewrecords: true,
				colMenu : true,

				autoScroll: false,//  如果需要冻结列必须使用,当autoScroll和shrinkToFit均为false时，会出现行滚动条
                shrinkToFit: false, // 如果需要冻结列必须使用 must be set with frozen columns, otherwise columns will be shrank to fit the grid width
                pager: "#jqGridPager"
            });
			// activate the toolbar searching
            $('#jqGrid').jqGrid('filterToolbar',{
                // JSON stringify all data from search, including search toolbar operators
                stringResult: true,
                // instuct the grid toolbar to show the search options
                searchOperators: true
            });
			$('#jqGrid').jqGrid('navGrid', '#jqGridPager',{},{},{},{},
				{ multipleSearch : true	,
				stringResult : true,
				multipleGroup : false
				}
			);
			setTimeout( function() {
			$('#jqGrid').jqGrid('autoSelect', {
				field : "progress_nm"
			});}, 50);
        });

        // // 选择显示哪些列
        // jQuery("#jqGrid").jqGrid('navButtonAdd','#jqGridPager',{
        //     caption: "Columns",
        //     title: "Reorder Columns",
        //     onClickButton : function (){
        //         jQuery("#jqGrid").jqGrid('columnChooser');
        //     }
        // });


        
        //表格宽度自适应
        $(function(){
            blankwidth = 30;
            blankheight = 120;
            $("#jqGrid").setGridWidth($(window).width()-blankwidth);
            $("#jqGrid").setGridHeight($(window).height()-blankheight);

            $(window).resize(function(){
                $("#jqGrid").setGridWidth($(window).width()-blankwidth);
                $("#jqGrid").setGridHeight($(window).height()-blankheight);
            });
        });

        // 导出表格
        $("#export").on("click", function(){
            $("#jqGrid").jqGrid("exportToExcel",{
                includeLabels : true,
                includeGroupHeader : true,
                includeFooter: true,
                fileName : "jqGridExport.xlsx",
                maxlength : 40 // maxlength for visible string data 
            })
        })

        // 添加序号列
        $("#jqGrid").jqGrid('setLabel', 'rn', '序号', { 'text-align': 'center' });

        // 冻结列，同时列配置需要增加frozen: true
        $("#jqGrid").jqGrid("setFrozenColumns");

    </script>

</body>
</html>